<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script language="javascript" type="text/javascript" >
    $(document).ready(function(){

//    if($("#test").val().length > 0)
        $.post("{{$base_index_url}}/user/admin/search/auto", {queryString: ""+$("#test").val()+""}, function(data){
//            if(data.length ==0) {
                data = data.split(" ");
//                alert(data);
                $("#test").autocomplete(data);
//            }
//           else{
//               var ex = "ore electors ttributes raversing anipulation SS vents ffects jax tilities loy".split(" ");
//                $("#test").autocomplete(ex);
//            }
        });

  });
      
    function lookup(inputString) {
            if(inputString.length > 0) {
                    $.post("{{$base_index_url}}/user/admin/search/auto", {queryString: ""+inputString+""}, function(data){
                            if(data.length >0) {
                                var data1 = data.split(" ");
//                                var data1 = "ore electors ttributes raversing anipulation SS vents ffects jax tilities loy".split(" ");
                                $("#test").autocomplete(data1);
                            }
                            else{
                                var ex = "NOT WORKING".split(" ");
                                $("#test").autocomplete(ex);
                            }
                    });
            }
    } // lookup
</script>

<script language="javascript" type="text/javascript" charset="utf-8">
var uTable;
var dialog;
function redraw(){
    uTable.fnDraw();
}

function reset_filters(){
    $("#fname").val("");
    $("#lname").val("");
    $("#username").val("");
    $("#email").val("");
    redraw();
}
function showMore(id){
    txt =  $("#"+id).html();
    $("#dialog_p").html(txt);
    dialog.dialog('open');

}
function init_dialog(){
    dialog =  $( "#dialog" ).dialog(
    {
        autoOpen: false ,
        width: 800,
        height:500,
        modal:true
    });
}

$(document).ready(function() {

        uTable = $('#search_table').dataTable({
                    "aoColumns": [
                        {"sClass":"center"},
                        null,
                        null,
                        null,
                        {"sClass":"center"}
                        ],
        "bFilter": true,
        "bSort": true,
        "bPaginate": true,
        "fnDrawCallback" : function(){
        },
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": false,
        "sAjaxSource": "{{$base_index_url}}/user/admin/search/process",
        "fnServerData": function ( sSource, aoData, fnCallback ) {
                //REQUIRED: Add a Post variable with the object value
                aoData.push( { "name": "fname","value": $("#fname").val()});
                aoData.push( { "name": "lname","value": $("#lname").val()});
                aoData.push( { "name": "username","value": $("#username").val()});
                aoData.push( { "name": "email","value": $("#email").val()});
                $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data":aoData,
                            "error": function(){
                                    alert('Error!!!!!!!');
                            },
                            "success":  fnCallback
                    });
        }
    });
} );

</script>
<h1>Search User</h1>
<br>
{{$form_errors}}

Users: <input class="ac_input" id="test" autocomplete="off" onkeyup="lookup(this.value);" >
<!--<div class="ac_results" id="test" style="display: none; position: absolute; width: 151px; top: 20px; left: 91px;">
    <ul style="max-height: 180px; overflow: auto;">
        <li class="ac_even"><strong>C</strong>ore</li>
        <li class="ac_odd"><strong>C</strong>SS</li>
    </ul>
</div>-->
<fieldset>
<legend>Search User</legend>
    <div id="dynamic">
    <table>
        <tr>
            <td>First Name (%): </td>
            <td><input type="text" id="fname" onkeypress="if(event.keyCode==13) redraw();"/> </td>
        </tr>

        <tr>
            <td>Last Name (%): </td>
            <td><input type="text" id="lname" onkeypress="if(event.keyCode==13) redraw();"/> </td>
        </tr>

        <tr>
            <td>Username (%): </td>
            <td><input type="text" id="username" onkeypress="if(event.keyCode==13) redraw();"/> </td>
        </tr>

        <tr>
            <td>Email (%): </td>
            <td><input type="text" id="email" onkeypress="if(event.keyCode==13) redraw();"/> </td>
        </tr>
        <tr>
            <div style="float: left; width: 150px;">&nbsp;</div>
            <div style="float: left;">
                <td>
                    <input type="button" onclick="redraw()" value="Search"  />
                    <input type="button" onclick="reset_filters()" value="Reset"  />
                </td>
            </div>
        </tr>
   </table>
</div>
</fieldset>

<fieldset>
    <table class="display" id="search_table">
        <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Username</th>
                 <th>Email</th>
                 <th>Action</th>
             </tr>
        </thead>
        <tbody></tbody>
    </table>
</fieldset>
<!--
{{if isset($users)}}
{{$total_users_found}} users found

{{if $total_users_found>0}}

<br>

<fieldset>
    <legend>Search Result</legend>
    <table  width="100%">
        <tr style="text-decoration: underline;">
            <td align="center" style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" > #</td>
            <td style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" width="20%"> First Name</td>
            <td style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" width="20%"> Last Name</td>
            <td style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" width="20%"> Username</td>
            <td style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" width="20%"> Email</td>
            <td  align="center" style="font-size: 14px; text-decoration: underline; color:DarkCyan ;" width="10%"> Edit</td>
        </tr>
        {{assign var="i" value=1}}
        {{foreach from=$users item=u}}
        <form method="post" action="{{$base_index_url}}/user/admin/user_detail/load_user_details">
            <tr bgcolor="#e3e8f4">
                <td align="center"> {{$i}}</td>
                <td width="20%"> {{$u->first_name}}</td>
                <td width="20%"> {{$u->last_name}}</td>
                <td width="20%"> {{$u->username}}</td>
                <td width="20%"> {{$u->email}}</td>
                <td align="center" width="10%"><input type="submit" id="submit" class="button" value="Edit" name="edit" />
                </td>
            </tr>
            <span style="display:none"><input type="hidden" value={{$u->id}} name="id" /></span>
            <span style="display:none">{{$i++}}</span>  
        </form>
        {{/foreach}}
<center><span style="font-size: 14px">        {{$pag_links}}  </span></center>
<br>
    </table>
</fieldset>
{{/if}}
{{/if}}-->
</html>